<template>
    <van-nav-bar fixed placeholder right-text="搜索" @click-right="handleSearch" @click-left="handleBack">
        <template #left>
          <van-icon name="arrow-left" size="1.5em" color="#000" />
        </template>
        <template #title>
          <div class="search-box">
            <van-icon name="search" size="1.2em" color="#1baeae" />
            <input v-model="searchVal" placeholder="百果园" class="search-input" />
          </div>
        </template>
    </van-nav-bar>

    <div class="main" v-if="!isSearch">
        <div class="search-history" v-if="historySearch">
            <div class="history-head">
                <span class="title">搜索历史</span>
                <van-icon name="delete-o" size="1em" @click="delHistorySearch" />
            </div>
            <div class="search-main">
                <template v-for="(item,index) in 10">
                    <span class="search-history-text" v-if="moreShow ? index <= 6 : true">华为p30</span>
                </template>
                <van-icon
                    :name="moreShow ? 'arrow-down': 'arrow-up'"
                    size="1em"
                    style="margin: .1875rem; padding: .0625rem .1875rem; border-radius: .25rem; background-color: #fff;"
                    @click="changeMore"
                />

            </div>
        </div>

        <div class="search-hot">
            <div class="title">大家都在搜</div>
            <div class="search-main">
                <template v-for="(item,index) in 10">
                    <span class="search-hot-text">华为p30</span>
                </template>

            </div>
        </div>
    </div>

      <div class="search-content" v-else>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="handleLoad"

        >
            <div class="goods-box" v-for="(item,index) in goodsList" :key="index" @click="handleCheckGoods">
                <img src="@/assets/logo.png" alt="" class="cover">
                <div class="goods-info">
                    <span class="name">HUAWEI Meta40 Pro + 5G 全网通 125GHUAWEI Meta40 Pro + 5G 全网通 125G</span>
                    <span class="price">¥ 7988</span>
                </div>
            </div>

        </van-list>
    </div>


</template>

<script lang='ts'>
interface goodsInterface {
    cover: string,
    images: string,
    name: string,
    price: number,
    originalPrice: number,
    code: string,
    detail: string
}

interface pagerInterface {
    pageIndex: number,
    pageSize: number,
    itemCount?: number,
    onPage?: boolean
}

import { defineComponent,ref,Ref,reactive,computed } from 'vue'
import router from '../config/router'
export default defineComponent({
    setup() {
        const handleBack = () => {
            if(isSearch.value){
                isSearch.value = false
                return
            }
            router.back();
        }

        // 搜索关键词
        const searchVal:Ref<string> = ref('')

        // 是否显示更多
        const moreShow:Ref<boolean> = ref(true)
        const changeMore:Function = ():void => {
            moreShow.value = !moreShow.value
        }

        // 是否显示搜索记录
        const historySearch:Ref<boolean> = ref(true)
        // 清空搜索记录
        const delHistorySearch = () => {
            historySearch.value = false
        }

        // 是否为搜索状态
        const isSearch: Ref<boolean> = ref(false)
        // 搜索
        const handleSearch:Function = ():void => {
            goodsList.splice(0,goodsList.length)
            isSearch.value = true

            getData()
            
        }

        const goodsInfo = {
            cover: '111',
            images: '111',
            name: '111',
            price: 111,
            originalPrice: 111,
            code: '111',
            detail: '111',
        }

        // 列表
        const pager:pagerInterface = reactive({
            pageSize: 10,
            pageIndex: 1,
            onPage: true
        })
        // 请求参数
        const params = computed(() => {
            return {
                ...pager,
                name: searchVal.value
            }
        })
        let goodsList: Array<goodsInterface> = reactive([])
        const loading:Ref<boolean> = ref(true)
        const finished:Ref<boolean> = ref(false)
        const handleLoad:Function = ():void => {
            if(params.value.pageIndex >= 4){
                loading.value = false
                finished.value = true
                return
            }

            pager.pageIndex += 1
            getData()

        }
        
        // 获取列表数据
        const getData = () => {
            loading.value = true
            finished.value = false
            setTimeout(() => {
                for(let i = 0; i < 10;i++){
                    goodsList.push(goodsInfo)
                }

                loading.value = false

                if(goodsList.length >= 40){
                    finished.value = true
                }

            },1000)
        }

        const handleCheckGoods = () => {
            router.push({
                path: '/goods-detail',
                query: {
                    code: '1111'
                }
            })
        }


        return {
            handleBack,
            searchVal,
            moreShow,
            changeMore,
            historySearch,
            delHistorySearch,
            isSearch,
            handleSearch,
            goodsList,
            loading,
            finished,
            handleLoad,
            handleCheckGoods
        }
    }
})
</script>


<style lang="less" scoped>
.search-box {
  display: flex;
  align-items: center;
  background-color: #f1f2f6;
  width: 7.5rem;
  border-radius: .625rem;
  height: .8125rem;
  padding: 0 .25rem;

  .search-input {
    flex: 1;
    border: none;
    background-color: rgba(0,0,0,0);
    font-size: .375rem;
    margin-left: .0625rem;
  }

}

.main {
    padding: 0 .5rem;
    height: calc(100% - 1.22667rem);
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }
}

.search-history {
    margin: .25rem 0;

    .history-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .125rem;

        .title {
            font-weight: 600;
            font-size: .40625rem;
        }
    }

    .search-main {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .search-history-text {
        font-size: .3125rem;
        background-color: #fff;
        border-radius: .25rem;
        padding: .0625rem .1875rem;
        line-height: .5rem;
        margin: .1875rem;
    }
}

.search-hot {
    margin: .25rem 0;

    .title {
        font-weight: 600;
        font-size: .40625rem;
        margin-bottom: .125rem;
    }

    .search-main {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .search-hot-text {
        font-size: .3125rem;
        border-radius: .25rem;
        line-height: .5rem;
        margin: .1875rem 0;
        width: 50%;
    }
}

.goods-box {
    display: flex;
    margin-top: .375rem;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: .375rem;

    .cover {
        height: 2.5rem;
        width: 2.5rem;
        margin-right: .25rem;
    }

    .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: .125rem 0;
        
        .name {
            .text-overflow(2);
            margin-bottom: .375rem;
        }

        .price {
            color: @base-color;
        }
    }
}

.search-content {
    height: calc(100% - 1.22667rem);
    padding: 0 .375rem;

    &::-webkit-scrollbar {
        display: none;
    }
}

:deep(.van-nav-bar__title)  {
  max-width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
}

:deep(.van-nav-bar__text) {
    color: #333;
}

:deep(.van-list){
    height: 100%;
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }
}
</style>